<template>
	<view :style="viewColor">
		<form @submit="formSubmit" report-submit='true'>
			<view class="release_content">
				<view>
					<view class="release_item">
						<view class="report_title">举报内容</view>
						<view class="textarea">
							<textarea placeholder='请填写举报内容' name="comment" placeholder-class='placeholder' v-model="formData.content" maxlength="600"></textarea>
						</view>
						<view class="photo_count">
							<view class="input_photo acea-row row-middle">
								<view class="pictrue" v-for="(item, index) in formData.image" :key="index">
									<easy-loadimage mode="widthFix" :image-src="item"></easy-loadimage>
									<view class="close_btn" @click="DelPic(index)"><text class="iconfont icon-guanbi4"></text></view>
								</view>
								<block>
									<view v-if="formData.image.length < 6" class="pictrue acea-row row-center-wrapper row-column add" @click.stop="clk">
										<view><text class='iconfont icon-icon25201'></text></view>
										<view class="text">添加图片</view>	
									</view>
								</block>
								<view v-if="showCd" :ratio="16/9" class="container">
									<bt-cropper ref="cropper" :imageSrc="imageSrc" @cropEnd="loadImage" :dWidth="800">
										<!-- 你想插入的内容 -->
										<button class="crop_btn" @click="crop">裁切</button>
									</bt-cropper>
								</view>
							</view>
						</view>
					</view>
					<view class="release_item">
						<view class='item row-between-wrapper'>
							<view class='name'>联系方式</view>
							<view class="select">
								<view class="select_count">
									<input type="text" placeholder="请输入您的手机号邮箱或者QQ"  v-model="formData.phone">
								</view>
							</view>
						</view>
					</view>
				</view>
				<button class="release_btn button" form-type="submit">提交</button>
			</view>
		</form>
		<avatar @upload="doUpload" @getName="getImgName" quality="1" ref="avatar" selWidth="250upx" selHeight="250upx"></avatar>
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
	</view>	
</template>

<script>
	import { mapGetters } from "vuex";
	import authorize from '@/components/Authorize';
	import avatar from "@/components/yq-avatar/yq-avatar.vue";
	import {TOKENNAME, HTTP_REQUEST_URL} from '@/config/app.js';
	import { createReport } from "@/api/user";
	import { configMap } from '@/utils';
	import store from '@/store';
	export default {
		components: {
			avatar,
			authorize,
		},
		data() {
			return {
				formData: {
					image: [],
					content: "",
				},
				imageSrc: '',
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				showCd: false,
				imgName: "",
				type: 1, // 1需求
				link_id: 0, // 举报内容ID
			};
		},
		computed: {
			...mapGetters(['isLogin', 'viewColor', 'uid']),
			...configMap({community_app_switch: []})
		},
		watch:{},
		mounted() {
		},
		onLoad(options) {
			this.type = options.type;
			this.link_id = options.link_id;
		},
		methods: {
			onLoadFun() {
				this.isShowAuth = false;
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e;
			},
			clk() {
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original'],
					success: (res) => {
						console.log(res)	
						let tempFilePaths = res.tempFilePaths[0]
						//#ifdef APP-PLUS
						if(uni.getSystemInfoSync().platform == 'ios'){
							that.doUpload(tempFilePaths)
						}else{
							let size = res.tempFiles[0].size/1024
							if(size >= 1){
								uni.compressImage({
									src: tempFilePaths,
									quality: 80, // 仅对jpg有效
									success: res => {
										that.imageSrc = res.tempFilePath;
										that.showCd = true;
									},
									fail: err => {
										console.log('失败了compressImage', tempFilePaths);
										that.imageSrc = tempFilePaths
										that.showCd = true
									}
								})
							}else{
								that.imageSrc = tempFilePaths
								that.showCd = true
							}
						}
						//#endif
						//#ifndef APP-PLUS
							that.imageSrc = tempFilePaths
							that.showCd = true
						//#endif
					}
				})
			},
			crop(){
				uni.showLoading({
					title: '',
					mask: true
				})
			  // 通过组件定义的ref调用cropper方法，返回一个promise对象
			  this.$refs.cropper.crop().then(([err,res])=>{
					if(!err){
						uni.hideLoading()
						this.doUpload(res.tempFilePath)
					}else{
						uni.hideLoading()
						console.log(err)
					}
				})
			},
			loadImage() {
				this.showCd = false
			},
			doUpload(rsp) {
				let that = this
				uni.showLoading({
					title: '上传中',
					mask: true
				})
				uni.uploadFile({
					url: HTTP_REQUEST_URL + '/api/upload/image/field',
					filePath: rsp,
					name: 'field',
					formData: {
						'filename': rsp,
						'name': that.imgName
					},
					header: {
						// #ifdef MP
						"Content-Type": "multipart/form-data",
						// #endif
						[TOKENNAME]: 'Bearer ' + store.state.app.token
					},
					success: (uploadFileRes) => {
						let imgData = JSON.parse(uploadFileRes.data)
						if(imgData.data.path){
							that.formData.image.push(imgData.data.path)
							uni.hideLoading()
						}
					},
					complete(res) {}
				});
			},
			getImgName(name){
				this.imgName = name
			},
			/**删除图片*/
			DelPic: function(index) {
				let that = this
				that.formData.image.splice(index, 1);
			},
			/**
			 * 提交数据
			 */
			formSubmit: function(e) {
				let that = this;
				let value = that.formData;
				if (!value.content) return that.$util.Tips({
					title: '请填写举报内容'
				});
				// if(!value.image.length)  return that.$util.Tips({
				// 	title: '请上传举报图片'
				// });
				if(!value.phone) return that.$util.Tips({
					title: '请填写联系方式'
				});
				value.type = that.type;
				value.link_id = that.link_id;
				uni.showLoading({
					title: '保存中',
					mask: true
				})
				createReport(value).then(res=>{
					uni.hideLoading()
					that.$util.Tips({
						title: '举报成功',
						icon: 'success'
					}, {
						tab: 3
					});
				}).catch(err=> {
					that.$util.Tips({title: err});
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #F5F5F5;
	}
	.crop_btn{
		line-height: 90rpx;
		height: 90rpx;
	height: calc(90rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		height: calc(90rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
	}
	.container{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 20;
		width: 750rpx;
		height:100vh;
	}
	.release_content{
		margin-top: 30rpx;
		.release_tab{
			border-radius: 16rpx 16rpx 0 0;
			border-bottom: 1rpx solid #E4E4E4;
			background: #fff;
			align-items: center;
			justify-content: center;
			height: 86rpx;
			.tab_item{
				margin: 0 40rpx;
				font-size: 32rpx;
				color: #999;
				position: relative;
				line-height: 86rpx;
				cursor: pointer;
				&.on{
					color: #E93323;
					&::after{
						content: "";
						display: inline-block;
						width: 100%;
						height: 3rpx;
						background: #E93323;
						position: absolute;
						bottom: 2rpx;
						left: 0;
					}
				}
				.iconfont{
					margin-right: 10rpx;
					font-size: 32rpx;
				}
			}
		}
		padding: 0 20rpx;
		.release_item{
			background: #ffffff;
			padding: 30rpx;
			border-radius: 10rpx;
		}
		.report_title {
			font-size: 32rpx;
			font-weight: 500;
			color: #323232;
			line-height: 44rpx;
		}
		.photo_count{
			padding: 30rpx 0;
		}
	}
	::v-deep.input_photo .easy-loadimage,::v-deep.input_photo uni-image,::v-deep.input_photo image{
		width: 180rpx;
		height: 180rpx;
		border-radius: 12rpx!important;
	}
	.input_photo .pictrue{
		width: 180rpx;
		height: 180rpx;
		border-radius: 12rpx!important;
		margin-right: 11rpx;
		position: relative;
		overflow: hidden;
		&:nth-child(3n){
			margin-right: 0;
		}
		.close_btn{
			width: 30rpx;
			height: 30rpx;
			background: rgba(0,0,0,.6);
			border-radius: 0 12rpx 0 12rpx;
			position: absolute;
			top: 0;
			right: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 10;
			.iconfont{
				color: #ffffff;
				font-size: 12rpx;
			}
		}
		.cover_text{
			display: flex;
			width: 58rpx;
			height: 29rpx;
			background: #E93323;
			border-radius: 0px 12rpx 0px 12rpx;
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 10;
			align-items: center;
			justify-content: center;
			font-size: 18rpx;
			color: #fff;
		}
	}
	::v-deep.loading-img{
		width: 180rpx;
		height: 180rpx;
		border-radius: 12rpx;
	}
	.input_photo .pictrue{
		margin-bottom: 20rpx;
		.videoHover{
			width: 180rpx;
			height: 180rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 10;
			>view{
				width: 50rpx;
				height: 50rpx;
				background: #000000;
				border-radius: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.iconfont{
					color: #ffffff;
					font-size: 21rpx;
				}
			}	
		}
		.video-text{
			display: block;
			width: 180rpx;
			text-align: center;
			color: #ffffff;
			font-size: 18rpx;
			z-index: 13;
			position: absolute;
			bottom: 20rpx;
		}
		video{
			width: 180rpx;
			height: 180rpx;
			border-radius: 12rpx;
		}
	}
	.input_photo .add{
		background: #f6f6f6;
		color: #666666;
		.iconfont{
			font-size: 50rpx;
		}
		.text{
			margin-top: 20rpx;
			font-size: 27rpx;
		}
	}
	.textarea textarea {
		font-size: 28rpx;
		padding-bottom: 38rpx;
		width: 100%;
		box-sizing: border-box;
		overflow: hidden;
		height: 190rpx;
		margin-top: 30rpx;
	}
	.textarea .placeholder {
		color: #BBBBBB;
	}
	.release_item .item{
		border-bottom: 1rpx solid #eee;
		position: relative;
		font-size: 30rpx;
		&:last-child{
			border-bottom: none;
		}
		.name{
			font-size: 32rpx;
			font-weight: 500;
			color: #323232;
			line-height: 44rpx;
		}
		.select{
			margin-top: 36rpx;
			.select_count{
				display: flex;
				align-items: center;
				input {
					font-size: 28rpx;
					font-weight: 400;
					color: #A0A0A0;
					width: 100%;
				}
			}
			.text{
				margin-right: 15rpx;
				display: flex;
				align-items: center;
				.image,image,uni-image{
					width: 60rpx;
					height: 60rpx;
					margin-right: 5rpx;
				}
			}
			.iconfont{
				font-size: 24rpx;
			}
			.text_name{
				color: var(--view-theme);
				padding: 5rpx 12rpx;
				background: var(--view-minorColor);
				border-radius: 23rpx;
				font-size: 24rpx;
				margin-right: 10rpx;
				.icon{
					color: var(--view-theme);
					font-weight: bold;
					font-size: 24rpx;
				}
				.title{
					margin: 0 10rpx;
				}
				.iconfont{
					font-size: 16rpx;
				}
			}
		}
	}
	.button{
		width: 710rpx;
		height: 86rpx;
		line-height: 86rpx;
		text-align: center;
		font-size: 32rpx;
		background: var(--view-theme);
		border-radius: 43rpx;
	}
	.release_btn{
		margin-top: 30rpx;
	}
	.video-count{
		position: fixed;
		width: 600rpx;
		height: 500rpx;
		top: 50%;
		left: 50%;
		margin-left: -300rpx;
		margin-top: -250rpx;
		z-index: 100;
		display: flex;
		align-items: center;
		justify-content: center;
		.videoLink{
			width: 600rpx;
			height: 500rpx;
		}
	}
	.check_label_list {
		// display: flex;
		// flex-wrap: nowrap;
		white-space: nowrap;
		.check_label_item {
			width: 120rpx;
			text-align: center;
			position: relative;
			display: inline-block;
			.check_label_close {
				position: absolute;
				top: 0;
				right: 0;
				width: 30rpx;
				height: 30rpx;
				text-align: center;
				line-height: 30rpx;
				border-radius: 100%;
				background-color: #ccc;
			}
			.check_label_avatar image{
				width: 120rpx;
				height: 120rpx;
			}
		}
	}
	.location {
		text-align: center;
	}
	.input_price {
		text-align: right;
	}
</style>
